<template>
  <div>
    <el-form
      ref="processUpdateForm"
      :model="process"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item :label="$t('processList.processName')" prop="processName">
        <el-input v-model="process.processName" />
      </el-form-item>
      <el-form-item :label="$t('processList.processKey')" prop="processKey">
        <el-input v-model="process.processKey" />
      </el-form-item>
      <el-form-item :label="$t('processList.processAbbr')" prop="processAbbr">
        <el-input v-model="process.processAbbr" />
      </el-form-item>
      <el-form-item :label="$t('processList.companyId')" prop="companyId">
        <el-select v-model="process.companyId" :placeholder="$t('processList.placeSelect')" clearable @change="getCompanyById()">
          <el-option value="-1">{{ $t('processList.placeSelect') }}</el-option>
          <el-option
            v-for="(item, index) in companyList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('processList.companyCode')">
        <el-input v-model="process.companyCode" disabled />
      </el-form-item>
      <el-form-item :label="$t('processList.tenantId')">
        <el-input v-model="process.tenantId" disabled /></el-form-item>
      <el-form-item :label="$t('processList.status')" prop="validState">
        <el-switch
          v-model="process.validState"
          :active-value="1"
          :inactive-value="0"
          active-text="有效"
          inactive-text="失效"
        />
      </el-form-item>
      <el-form-item :label="$t('processList.sort')" prop="sort">
        <el-input-number v-model="process.sort" />
      </el-form-item>
      <el-form-item :label="$t('processList.remarks')">
        <el-input v-model="process.remarks" type="textarea" :autosize="{minRows: 4, maxRows:10}" /></el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit"> {{ $t('table.confirm') }}</el-button>
        <el-button @click="onCancel"> {{ $t('table.cancel') }}</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>

import { updateProcess } from '@/api/process'
import deepClone from 'clone-deep'
import { generateTitle } from '@/utils/i18n'
import { getCompanyDict, getCompanyById } from '@/api/company'
import store from '@/store'

export default {
  name: 'UpdateProcess',

  props: {
    processInfo: {
      type: Object,
      require: true,
      default: null
    }
  },
  data() {
    return {
      companyList: [],
      companyMap: {},
      tenantId: store.getters.tenantId,
      process: {
        processId: null,
        processKey: null,
        processName: null,
        remarks: null,
        tenantId: null,
        companyId: null,
        companyCode: null,
        processMenuId: null,
        processType: null,
        sort: 1,
        validState: null
      },
      company: {},
      loading: false,
      rules: {
        processName: [
          { required: true, message: '请输入流程名称', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        processKey: [
          { required: true, message: '请输入流程KEY', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        processAbbr: [
          { required: true, message: '请输入流程简称', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '请选择所属系统', trigger: 'change' }
        ]

      }
    }
  },
  computed: {

  },
  watch: {
    processInfo: {
      handler(newValue, oldValue) {
        this.process = deepClone(newValue)
      },
      deep: true
    }
  },
  mounted() {
    this.process = deepClone(this.processInfo)
  },
  created() {
    this.getCompanyDict()
  },
  methods: {
    getCompanyById() {
      if (this.process.companyId > 0) {
        const postData = this.process.companyId
        getCompanyById(postData).then(response => {
          this.company = response.data
          this.process.companyCode = response.data.companyCode
        })
      }
    },
    getCompanyDict() {
      const postData = { tenantId: this.tenantId }
      getCompanyDict(postData).then(response => {
        this.companyList = response.data
        for (const key in response.data) {
          this.companyMap[response.data[key].value] = response.data[key].label
        }
      })
    },
    generateTitle,

    onSubmit() {
      const _this = this
      _this.loading = true
      _this.$refs['processUpdateForm'].validate((valid) => {
        if (valid) {
          const postData = _this.process
          updateProcess(postData).then(response => {
            _this.$message.success('保存成功!')
            _this.$nextTick(() => {
              _this.loading = false
            })
            _this.$emit('closeUpdateForm')
            _this.$emit('queryList')
          })
        } else {
          _this.$nextTick(() => {
            _this.loading = false
          })
          return
        }
      })
      this.$nextTick(() => {
        _this.loading = false
      })
    },
    onCancel() {
      const _this = this

      _this.$emit('closeUpdateForm')
    }
  }
}
</script>

<style scoped>
.el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .el-form-item__label {
        text-align: justify;
        height: 50px;
    }

    .el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }
.el-drawer:focus {
    outline: none;
}

.el-drawer {
  overflow: scroll;
}

</style>
